<!--
 * @Author: wjc
 * @Date: 2025-06-18 09:09:53
 * @LastEditors: wjc
 * @LastEditTime: 2025-09-19 10:36:38
 * @Description: 工具栏
-->
<template>
  <div
    :class="{
      'bg-accent rounded-3xl px-3 py-1': toolbarList.length > 1,
    }"
    class="flex-center absolute right-2 top-4 z-10"
  >
    <LayoutLanguage v-if="showLanguage" />
    <LayoutTheme v-if="showTheme" />
  </div>
</template>

<script setup lang="ts">
  import { LayoutLanguage, LayoutTheme } from '#/layouts/components'

  export type ToolbarType = 'language' | 'theme'

  interface Props {
    toolbarList?: ToolbarType[]
  }

  defineOptions({
    name: 'AuthenticationToolbar',
  })

  const props = withDefaults(defineProps<Props>(), {
    toolbarList: () => ['language', 'theme'],
  })
  const showLanguage = computed(() => props.toolbarList.includes('language'))
  const showTheme = computed(() => props.toolbarList.includes('theme'))
</script>
